<template>
    <div class="detail-nav">
        <div :class="{ 'active-div': isActive('/problem/' + $route.params.id + '/description') }">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wenjian"></use>
            </svg>
            <router-link active-class="active"
                :to="{ path: '/problem/' + $route.params.id + '/description' }">题目描述</router-link>
        </div>
        <div :class="{ 'active-div': isActive('/problem/' + $route.params.id + '/answer') }">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-faxian"></use>
            </svg>
            <router-link active-class="active"
                :to="{ path: '/problem/' + $route.params.id + '/answer' }">题解</router-link>
        </div>
        <div :class="{ 'active-div': isActive('/problem/' + $route.params.id + '/comment') }">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-pinglun"></use>
            </svg>
            <router-link active-class="active"
                :to="{ path: '/problem/' + $route.params.id + '/comment' }">评论</router-link>
        </div>
        <div :class="{ 'active-div': isActive('/problem/' + $route.params.id + '/submitrecord') }">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-lishijilu"></use>
            </svg>
            <router-link active-class="active"
                :to="{ path: '/problem/' + $route.params.id + '/submitrecord' }">提交记录</router-link>
        </div>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()

const isActive = (path) => {
    return route.path === path
}
</script>

<style scoped>
.detail-nav {
    width: 100%;
    padding: 5px 0;
    display: flex;
    justify-items: center;
}

.detail-nav div {
    height: 100%;
    padding: 0 10px;
    font-size: 16px;
}

.detail-nav .icon {
    width: 16px;
    height: 16px;
}

.detail-nav i {
    margin-right: 2px;
}

.detail-nav div:hover {
    background-color: #f0f0f0;
    border-radius: 5px;
}

.active-div {
    background-color: #f0f0f0;
    border-radius: 5px;
}
</style>
